<!--
 * @Description: cesium
 * @Author: wang_k
 * @Date: 2023-05-23 11:54:17
 * @LastEditTime: 2023-05-26 20:20:31
 * @FilePath: /测试文档(总结)/56.cesium.html
-->
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <style type="text/css">
    body {
      padding: 0;
      margin: 0;
    }

    html,
    body,
    #map {
      height: 100%;
    }

    .cesium-viewer .cesium-viewer-bottom {
      display: none;
    }
  </style>
  <link rel="stylesheet" href="https://unpkg.com/cesium@1.63.1/Build/Cesium/Widgets/widgets.css" />
  <script src="https://unpkg.com/cesium@1.63.1/Build/Cesium/Cesium.js"></script>
  <script src="https://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js"></script>

</head>

<body>
  <div id="map" />
</body>
<script type="text/javascript">
  class TdtImageryProvider extends Cesium.UrlTemplateImageryProvider {
    constructor(type, key, options = {}) {
      var templateUrl = "//t{s}.tianditu.gov.cn/DataServer?T={t}&x={x}&y={y}&l={z}&tk={k}"
      // var templateUrl = "//t{s}.tianditu.gov.cn/{t}/wmts?service=WMTS&request=GetTile&version=1.0.0&layer={l}&style=default&tilematrixset=w&format=tiles&tilematrix={z}&tilecol={x}&tilerow={y}&tk={k}"
      var myUrl = templateUrl.replace(/\{t\}/g, type).replace(/\{l\}/g, type.substr(0, 3)).replace(/\{k\}/g, key)
      super(Object.assign({}, { url: myUrl, subdomains: "01234567", minimumLevel: type === "ibo_w" ? 3 : 1, maximumLevel: type === "ibo_w" ? 10 : 18 }, options))
    }
  }
  Cesium.TdtImageryProvider = TdtImageryProvider

  Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwNGNmNWUwMi02NWEyLTQxNzItOTNhNC1mY2NiZTcxNDc2OWYiLCJpZCI6MTU5NDQsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJhc3ciLCJnYyJdLCJpYXQiOjE1NjkyMjk3MTN9.PYUfCHykW23NuwRzzz04yW7JyZ4vQlcb4kToZ44r42w"
  Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(117.829599, 29.542412, 118.788968, 29.946417) // 设置相机默认范围为自定义区域
  Cesium.Camera.DEFAULT_VIEW_FACTOR = 0
  // console.debug(viewer.camera.computeViewRectangle()) // 可以返回当前区域矩形，以弧度为单位 
  var viewer = new Cesium.Map("map", {
    animation: false, // 是否显示动画控件
    baseLayerPicker: false, // 是否显示图层选择控件
    vrButton: false, // 是否显示VR控件
    fullscreenButton: false, // 是否显示全屏按钮
    geocoder: false, // 是否显示地名查找控件
    homeButton: false, // 是否显示返回主视角控件
    sceneModePicker: false, // 是否显示投影方式控件
    selectionIndicator: false, // 是否显示选中指示框
    timeline: false, // 是否显示时间线控件
    navigationHelpButton: false, // 是否显示帮助信息控件
    infoBox: false // 是否显示点击要素之后显示的信息
  })
  viewer.imageryLayers.remove(viewer.imageryLayers.get(0)) //移除 Cesium 默认图层
  viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 1)  //设置地球背景色黑色

  viewer.imageryLayers.addImageryProvider(new Cesium.TdtImageryProvider("img_w", "e7c490c41b0a193ab555d0205b811313"))
  // viewer.imageryLayers.addImageryProvider(new Cesium.TdtImageryProvider("cia_w", "e7c490c41b0a193ab555d0205b811313"))
  // viewer.terrainProvider = new Cesium.GeoTerrainProvider({ urls: "01234567".split("").map((o) => { return "//t" + o + ".tianditu.gov.cn/mapservice/swdx?T=elv_c&tk=e7c490c41b0a193ab555d0205b811313" }) })
  // var wtfs = new Cesium.GeoWTFS({ // 叠加三维地名服务, 三维地名服务，使用wtfs服务
  //   viewer: viewer,
  //   subdomains: "01234567",
  //   metadata: { boundBox: { minX: -180, minY: -90, maxX: 180, maxY: 90 }, minLevel: 1, maxLevel: 20 },
  //   depthTestOptimization: true,
  //   dTOElevation: 15000,
  //   dTOPitch: Cesium.Math.toRadians(-70),
  //   aotuCollide: true, // 是否开启避让
  //   collisionPadding: [5, 10, 8, 5], // 开启避让时，标注碰撞增加内边距，上、右、下、左
  //   serverFirstStyle: true, // 服务端样式优先
  //   labelGraphics: { font: "28px sans-serif", fontSize: 28, fillColor: Cesium.Color.WHITE, scale: 0.5, outlineColor: Cesium.Color.BLACK, outlineWidth: 2, style: Cesium.LabelStyle.FILL_AND_OUTLINE, showBackground: false, backgroundColor: Cesium.Color.RED, backgroundPadding: new Cesium.Cartesian2(10, 10), horizontalOrigin: Cesium.HorizontalOrigin.LEFT, verticalOrigin: Cesium.VerticalOrigin.TOP, eyeOffset: Cesium.Cartesian3.ZERO, pixelOffset: new Cesium.Cartesian2(5, 5), disableDepthTestDistance: undefined },
  //   billboardGraphics: { horizontalOrigin: Cesium.HorizontalOrigin.CENTER, verticalOrigin: Cesium.VerticalOrigin.CENTER, eyeOffset: Cesium.Cartesian3.ZERO, pixelOffset: Cesium.Cartesian2.ZERO, alignedAxis: Cesium.Cartesian3.ZERO, color: Cesium.Color.WHITE, rotation: 0, scale: 1, width: 18, height: 18, disableDepthTestDistance: undefined }
  // })
  // wtfs.getTileUrl = function () { return "//t{s}.tianditu.gov.cn/mapservice/GetTiles?lxys={z},{x},{y}&tk=e7c490c41b0a193ab555d0205b811313" } // 三维地名服务，使用wtfs服务
  // wtfs.getIcoUrl = function () { return "//t{s}.tianditu.gov.cn/mapservice/GetIcon?id={id}&tk=e7c490c41b0a193ab555d0205b811313" } // 三维图标服务
  // wtfs.initTDT([
  //   { "x": 6, "y": 1, "level": 2, "boundBox": { "minX": 90, "minY": 0, "maxX": 135, "maxY": 45 } },
  //   { "x": 7, "y": 1, "level": 2, "boundBox": { "minX": 135, "minY": 0, "maxX": 180, "maxY": 45 } },
  //   { "x": 6, "y": 0, "level": 2, "boundBox": { "minX": 90, "minY": 45, "maxX": 135, "maxY": 90 } },
  //   { "x": 7, "y": 0, "level": 2, "boundBox": { "minX": 135, "minY": 45, "maxX": 180, "maxY": 90 } },
  //   { "x": 5, "y": 1, "level": 2, "boundBox": { "minX": 45, "minY": 0, "maxX": 90, "maxY": 45 } },
  //   { "x": 4, "y": 1, "level": 2, "boundBox": { "minX": 0, "minY": 0, "maxX": 45, "maxY": 45 } },
  //   { "x": 5, "y": 0, "level": 2, "boundBox": { "minX": 45, "minY": 45, "maxX": 90, "maxY": 90 } },
  //   { "x": 4, "y": 0, "level": 2, "boundBox": { "minX": 0, "minY": 45, "maxX": 45, "maxY": 90 } },
  //   { "x": 6, "y": 2, "level": 2, "boundBox": { "minX": 90, "minY": -45, "maxX": 135, "maxY": 0 } },
  //   { "x": 6, "y": 3, "level": 2, "boundBox": { "minX": 90, "minY": -90, "maxX": 135, "maxY": -45 } },
  //   { "x": 7, "y": 2, "level": 2, "boundBox": { "minX": 135, "minY": -45, "maxX": 180, "maxY": 0 } },
  //   { "x": 5, "y": 2, "level": 2, "boundBox": { "minX": 45, "minY": -45, "maxX": 90, "maxY": 0 } },
  //   { "x": 4, "y": 2, "level": 2, "boundBox": { "minX": 0, "minY": -45, "maxX": 45, "maxY": 0 } },
  //   { "x": 3, "y": 1, "level": 2, "boundBox": { "minX": -45, "minY": 0, "maxX": 0, "maxY": 45 } },
  //   { "x": 3, "y": 0, "level": 2, "boundBox": { "minX": -45, "minY": 45, "maxX": 0, "maxY": 90 } },
  //   { "x": 2, "y": 0, "level": 2, "boundBox": { "minX": -90, "minY": 45, "maxX": -45, "maxY": 90 } },
  //   { "x": 0, "y": 1, "level": 2, "boundBox": { "minX": -180, "minY": 0, "maxX": -135, "maxY": 45 } },
  //   { "x": 1, "y": 0, "level": 2, "boundBox": { "minX": -135, "minY": 45, "maxX": -90, "maxY": 90 } },
  //   { "x": 0, "y": 0, "level": 2, "boundBox": { "minX": -180, "minY": 45, "maxX": -135, "maxY": 90 } }
  // ])
  
  // viewer.camera.flyTo({
  //   destination: Cesium.Cartesian3.fromDegrees(118.159084, 29.908912, 18000.0),
  //   orientation: { heading: Cesium.Math.TWO_PI, pitch: -30.0 / Cesium.Math.DEGREES_PER_RADIAN, roll: 0.0 }
  // })
</script>

</html>